<!-- 运行台账-设备缺失记录 -->
<template>
  <div class="equip-wrap-common">
    <px-form style="padding-top: 16px" class="custom-form-ui equip-form" :model="queryParams" label-position="right" label-width="120px">
      <px-row :gutter="16">
        <px-col :span="8">
          <px-form-item label="缺失日期">
            <px-date-picker
              v-model="queryParams.taskDate"
              type="daterange"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              unlink-panels
              @change="changeDate"
            />
          </px-form-item>
        </px-col>
        <px-col :span="6">
          <px-button type="primary" @click="queryTable">查询</px-button>
          <px-button @click="resetTable">重置</px-button>
        </px-col>
      </px-row>
    </px-form>
    <px-table :data="tableData" class="equip-table" size="small" height="calc(100vh - 368px)" border>
      <px-table-column label="序号" width="80" align="center" fixed="left">
        <template #default="{ $index }">
          {{ (queryParams.pageNum - 1) * queryParams.pageSize + $index + 1 }}
        </template>
      </px-table-column>
      <px-table-column
        v-for="(item, index) in tableColumns"
        :key="index"
        :label="item.label"
        :min-width="item.minWidth"
        :align="item.align"
        :show-overflow-tooltip="item.showOverflowTooltip"
        :fixed="item.fixed"
      >
        <template #default="scope">
          <px-button v-if="item.missingId" link type="primary" @click="handleView(scope.row)">
            {{ scope.row.missingId }}
          </px-button>
          <span v-else-if="item.missingDesc">
            <px-tooltip placement="top" :content="scope.row.missingDesc">
              <div class="table-ellipsis">{{ scope.row.missingDesc }}</div>
            </px-tooltip>
          </span>
          <span v-else-if="item.missingLevel">
            {{ scope.row.missingLevelDesc || "-" }}
          </span>
          <span v-else-if="item.reportTime">
            <span v-if="scope.row.reportTime">{{ scope.row.reportTime.split(" ")[0] }}</span>
            <span v-else>-</span>
          </span>
          <span v-else-if="item.rectifyTime">
            <span v-if="scope.row.rectifyTime">{{ scope.row.rectifyTime.split(" ")[0] }}</span>
            <span v-else-if="scope.row.delayRectifyTime">{{ scope.row.delayRectifyTime.split(" ")[0] }}</span>
            <span v-else>-</span>
          </span>
          <span v-else-if="item.missingPictureList" style="display: flex">
            <img
              v-for="(file, index) in scope.row.missingPictureList || []"
              :key="index"
              style="width: 28px; height: 28px; margin-right: 8px; cursor: pointer"
              :src="file.url || file.fileUrl"
              alt=""
              @click="photoPreview(scope.row.missingPictureList, file)"
            />
          </span>
          <span v-else-if="item.rectifyStatus">
            <px-tag
              v-if="scope.row.rectifyStatus"
              effect="plain"
              :style="{
                color: `${tagColorList[scope.row.rectifyStatus]}`,
                border: `1px solid ${tagBorderColorList[scope.row.rectifyStatus]}`,
                backgroundColor: `${tagBgColorList[scope.row.rectifyStatus]}`
              }"
            >
              {{ scope.row.rectifyStatusDesc }}
            </px-tag>
            <span v-else>-</span>
          </span>
          <span v-else-if="item.missingOwnerNameList">
            <template v-if="scope.row.missingOwnerNameList && scope.row.missingOwnerNameList.length > 0">
              <px-tag v-for="(item, index) in scope.row.missingOwnerNameList" :key="index">
                {{ item }}
              </px-tag>
            </template>
            <span v-else>-</span>
          </span>
          <span v-else>{{ scope.row[item.prop] === 0 ? scope.row[item.prop] : scope.row[item.prop] ? scope.row[item.prop] : "-" }}</span>
        </template>
      </px-table-column>
      <px-table-column fixed="right" label="操作" width="80" align="center">
        <template #default="scope">
          <!-- 详情 -->
          <px-tooltip content="详情" placement="top">
            <px-button link type="primary" icon="Tickets" @click="handleView(scope.row)" />
          </px-tooltip>
        </template>
      </px-table-column>
    </px-table>
    <pagination
      v-show="total > 0"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      class="equip-table-pagination"
      :total="total"
      @pagination="queryTable"
    />
    <px-image-viewer v-if="photoShow" hide-on-click-modal :draggable="false" :url-list="viewerPhotoList" @close="photoShow = false" />
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, toRefs } from "vue";
import { useRouter } from "vue-router";
import { queryDefect } from "@/api/defect";

const router = useRouter();

const tagColorList = {
  UNRESPONSE: "#EF4444", // 未响应
  UNDO: "#F59E0B", // 待整改
  DOING: "#3B82F6", // 整改中
  DELAY: "#EF4444", // 延期整改
  DONE: "#10B981", // 整改完成
  FINISHED: "#10B981" // 完结
};
const tagBorderColorList = {
  UNRESPONSE: "#FAC7C7", // 未响应
  UNDO: "#FCE2B6", // 待整改
  DOING: "#C6E2FF", // 整改中
  DELAY: "#FAC7C7", // 延期整改
  DONE: "#B7EAD9", // 整改完成
  FINISHED: "#B7EAD9" // 完结
};
const tagBgColorList = {
  UNRESPONSE: "#FEECEC", // 未响应
  UNDO: "#FEF5E6", // 待整改
  DOING: "#ECF5FF", // 整改中
  DELAY: "#FEECEC", // 延期整改
  DONE: "#E8F8F3", // 整改完成
  FINISHED: "#E8F8F3" // 完结
};
const props = defineProps(["eqpId"]);
const state = reactive<any>({
  queryParams: {
    pageNum: 1,
    pageSize: 20
  },
  tableColumns: [
    // { prop: "missingId", label: "缺失编号", minWidth: "160", showOverflowTooltip: true, fixed: "left", missingId: true },
    { prop: "rectifyStatus", label: "状态", minWidth: "100", showOverflowTooltip: true, rectifyStatus: true },
    { prop: "classNameDesc", label: "科室", minWidth: "70", showOverflowTooltip: true },
    { prop: "systemName", label: "系统", minWidth: "140", showOverflowTooltip: true },
    { prop: "missingLevel", label: "缺失等级", minWidth: "80", showOverflowTooltip: true, missingLevel: true },
    { prop: "missingTypeDesc", label: "缺失类别", minWidth: "80", showOverflowTooltip: true },
    { prop: "missingDesc", label: "缺失描述", minWidth: "160", showOverflowTooltip: false, missingDesc: true },
    { prop: "missingPictureList", label: "缺失照片", minWidth: "140", showOverflowTooltip: false, missingPictureList: true },
    // { prop: "missingPositionDescAll", label: "缺失位置", minWidth: "200", showOverflowTooltip: true },
    { prop: "reportUser", label: "上报人", minWidth: "120", showOverflowTooltip: true },
    { prop: "reportTime", label: "上报时间", minWidth: "100", showOverflowTooltip: true, reportTime: true },
    { prop: "missingOwnerNameList", label: "责任人", minWidth: "120", showOverflowTooltip: true, missingOwnerNameList: true },
    { prop: "rectifyTime", label: "结案时间", minWidth: "100", showOverflowTooltip: true, rectifyTime: true }
  ],
  tableData: [],
  total: 0,
  viewerPhotoList: [],
  photoShow: false
});
const { queryParams, tableColumns, tableData, total, viewerPhotoList, photoShow } = toRefs(state);

// 进入页面时触发
onMounted(async () => {
  queryTable();
});

// 获取开始日期及结束日期
const changeDate = val => {
  if (val && val.length > 0) {
    queryParams.value.startTime = val[0] + " 00:00:00";
    queryParams.value.endTime = val[1] + " 23:59:59";
  } else {
    queryParams.value.startTime = "";
    queryParams.value.endTime = "";
  }
};
// 查询列表
const queryTable = async () => {
  queryParams.value.eqpId = props.eqpId;
  const params = JSON.parse(JSON.stringify(queryParams.value));
  const data = await queryDefect(params);
  tableData.value = data?.data || [];
  total.value = data?.total || 0;
};
// 重置筛选条件列表
const resetTable = async () => {
  queryParams.value = {
    eqpId: props.eqpId,
    pageNum: queryParams.value.pageNum,
    pageSize: queryParams.value.pageSize
  };
  queryTable();
};
// 详情
const handleView = (row: any) => {
  router.push(`/all/safeManage/defect?id=${row.missingId}`);
};
// 图片预览
const photoPreview = (pictures, file) => {
  photoShow.value = true;
  const index = pictures.indexOf(file);
  let viewerList = [...pictures];
  let tempList = [];
  for (let i = 0; i < index; i++) {
    tempList.push(viewerList.shift());
  }
  viewerPhotoList.value = viewerList.concat(tempList).map(file => file.url || file.fileUrl);
};
</script>

<style lang="scss" scoped>
@import url("@/views/all/equip/scss/table-list.scss");

.equip-wrap-common {
  height: calc(100vh - 231px);
  padding: 0;
  overflow-x: hidden;
}
</style>
